<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-03-27 22:02:02
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-03-28 01:07:09
 * @FilePath: \mapview\src\components\lineComponent.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div id='line-main'>
        
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
name:'line-component',
  data(){
    return {
      option:{
  color: ['#FFCC00', '#A7EA56', '#00F997', '#00FFFF', '#0066B3'],

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
     // 图例文字的颜色
        textStyle: {
            color: '#fff' // 可以将颜色值设置为所需的颜色
        },
    data: ['危化品车辆未停在指定区域', '非危化品车辆占用危化品车位', '未按线停放', '停放超时预警', '人员停留时间过久']
  },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
       axisLine: {
            lineStyle: {
                color: '#fff' // 可以将颜色值设置为所需的颜色
            }
        },
        // 坐标轴标签的相关设置
        axisLabel: {
            color: '#fff' // 可以将颜色值设置为所需的颜色
        },
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
    }
  ],
  yAxis: [
    {
      type: 'value',
      // 坐标轴轴线的相关设置
        axisLine: {
            lineStyle: {
                color: '#fff' // 可以将颜色值设置为所需的颜色
            }
        },
        // 坐标轴标签的相关设置
        axisLabel: {
            color: '#fff' // 可以将颜色值设置为所需的颜色
        }
    },
    
  ],
  series: [
    {
      name: '危化品车辆未停在指定区域',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250,213,198,267,154,242]
    },
    {
      name: '非危化品车辆占用危化品车位',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310,421,254,227,215,342]
    },
    {
      name: '未按线停放',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220,320, 132, 201, 334, 190]
    },
    {
      name: '停放超时预警',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120,220, 402, 231, 134, 190],
      
    },
    {
      name: '人员停留时间过久',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150,220, 302, 181, 234, 210]
    }
  ]
      }
    }
  },
  mounted(){
    this.initEcharts();
  },
  methods:{
    initEcharts(){
        var chartDom = document.getElementById('line-main');
        console.info("echarts === ",echarts)
        var myChart = echarts.init(chartDom);
        this.option && myChart.setOption(this.option);

    }
  }
};
</script>

<style  scoped>
#line-main{
    width: 100%;
    height: 100%;
}
</style>